<template>
    <div class="ticketing-info" v-loading="loading">
        <DescribeSpecCom class="mb20 mt20" :list="formList" :form="form" />
        <el-collapse accordion v-model="activeNames" @change="handleChange">
            <el-collapse-item v-for="(v, k) in tableList" :key="k" :name="k">
                <template #title>
                    <div> {{ v.label }}
                        <span class="ml5" style="color:red">
                            {{ form[v.prop1]?.num || 0 }}
                        </span>
                        <span style="color:#283de6;margin-left: 2px;">{{ v.unit || '条' }}</span>
                    </div>
                </template>
                <tableCom v-if="v.type == 'tableCom'" :columns="v.children" :dataList="getDataList(v)" :key="activeTab" />
                <tableCom2 v-if="v.type == 'tableCom2'" :dataList="form[v.prop1][v.prop2]" timeType="ticketTime"
                    totalType="ticketAmount" dataType="ticketType" :labelEnum="ticketTypeEnum" :timeEnum="ticketTimeEnum" />
            </el-collapse-item>
            <el-collapse-item title="近三年票务情况明细表(元)" name="5">
                <div class="taxInfo-list">
                    <div class="taxInfo-item">
                        <el-table :data="threeYearDatas">
                            <el-table-column label="月份" align="center" prop="month">
                                <template #default="{ row }">
                                    <div>
                                        {{ row.month + '月份' }}
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column v-for="(it, i) in tableHeader" :key="i" :label="it.year" align="center">
                                <template #default="{ row }">
                                    <div>
                                        {{ row[it.year] || 0 }}
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="total-info-list">
                            <div class="total-info-item">年度汇总</div>
                            <div class="total-info-item" v-for="(v, i) in form.invoicingDetailsLast3Years" :key="i">
                                {{ v.sumMoney }}</div>
                        </div>
                    </div>
                </div>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script setup>
import { ticketTypeEnum, ticketTimeEnum } from '@/utils/enum';
import { getTicketInfo } from '@/api/taxReportManage';
import DescribeSpecCom from '../components/describeSpecCom';
import tableCom from '../components/tableCom';
import tableCom2 from '../components/tableCom2';
const route = useRoute()
const form = ref({ invoiceDataWarningViewModelList: {} })
const tableHeader = ref([])
const threeYearDatas = ref([])
const activeNames = ref('')
const loading = ref(false)
const formList = ref([{
    label: '是否存在冲红',
    prop: 'isRedChong',
},
{
    label: '近12月冲红张数比',
    prop: 'quantity12MoCountRate',
    unit: '%',
},
{
    label: '近12月冲红金额比',
    prop: 'moneyCountRate',
    unit: '%',
},
{
    label: '近3年最早开票日',
    prop: 'last3yearDay',
},
{
    label: '近2年最早开票日',
    prop: 'last2yearDay',
},
{
    label: '最近开票日期',
    prop: 'latestInvoiceDate',
},
{
    label: '最近开票间断',
    prop: 'las12mStopTicket',
    unit: '天',
},
{
    label: '近12月进项发票',
    prop: 'input_tax_invoice_amount_12m',
    unit: '元',
},
{
    label: '近12月销项发票',
    prop: 'output_tax_invoice_amount_12m',
    unit: '元',
},
{
    label: '近24月进项发票',
    prop: 'input_tax_invoice_amount_24m',
    unit: '元',
},
{
    label: '近24月销项发票',
    prop: 'output_tax_invoice_amount_24m',
    unit: '元',
},
{
    label: '近12月上游客户量',
    prop: 'supplier_count_12m',
    unit: '家',
},
{
    label: '近12月下游客户量',
    prop: 'customer_count_12m',
    unit: '家',
},
{
    label: '上游关联方客户数',
    prop: 'related_party_supplier_count_12m',
    unit: '家',
},
{
    label: '下游关联方客户数',
    prop: 'related_party_customer_count_12m',
    unit: '家',
},
{
    label: '上游关联对冲占比',
    prop: 'upstream_related_party_tax_ratio_12m',
    unit: '%',
},
{
    label: '下游关联对冲占比',
    prop: 'downstream_related_party_tax_ratio_12m',
    unit: '%',
},
],)

const tableList = ref([
    {
        type: 'tableCom2',
        label: '票务数据同环警标',
        prop1: 'invoiceDataWarningViewModelList',
        prop2: 'warningList',
    },
    {
        type: 'tableCom',
        label: '银行票务预警指标',
        prop1: 'bankBillLoanWarningList',
        prop2: 'bankBillLoanWarningIndicatorList', unit: '项',
        children: [
            { label: '月份', prop: 'month', },
            { label: '零销月数', prop: 'zero_sales_months', },
            { label: '零销连月', prop: 'max_consecutive_zero_sales_months', },
            { label: '断进月数', prop: 'discontinuation_months', }, { label: '断进天数', prop: 'discontinuation_days', },
            { label: '冲红票数', prop: 'downstream_red_invoice_count', },
            { label: '冲红金额', prop: 'downstream_red_invoice_amount', },
        ]
    },
    {
        type: 'tableCom',
        label: '近一年供应商明细',
        prop1: 'supplieDetailsLastYearList',
        prop2: 'supplieDetailsLastYearViewModelList',
        unit: '个',
        children: [
            { label: '供应商名称', prop: 'name', len: 30 },
            // { label: '滞纳金额(元)', prop: 'amount', },
            { label: '金额占比', prop: 'ratio', len: 30 },
            { label: '是否关联', prop: 'is_related', len: 30 },
        ]
    },
    {
        type: 'tableCom',
        label: '近一年销售商明细',
        prop1: 'sellerDetailsLastYearList',
        prop2: 'supplieDetailsLastYearViewModelList', unit: '个',
        children: [
            { label: '客户名称', prop: 'name', len: 30 },
            // { label: '滞纳金额(元)', prop: 'amount', },
            { label: '金额占比', prop: 'ratio', len: 30 },
            { label: '是否关联', prop: 'is_related', len: 30 },
        ]
    },
])
getInfo()
function getInfo() {
    const reqForm = { id: route.query.id }
    loading.value = true
    getTicketInfo(reqForm).then(res => {
        form.value = res.data
        tableHeader.value = res.data.invoicingDetailsLast3Years?.map(item => ({ year: item.year }));
        let hasMonth = {};
        let arrs = [];
        res.data?.invoicingDetailsLast3Years?.forEach(item => {
            let obj = {};
            item.monthDetail.forEach((it, index) => {
                it.invoicingDetails.forEach(ii => {
                    if (!hasMonth[it.month]) {
                        obj = { month: ii.month, [item.year]: ii.amt }
                    } else {
                        obj = { amt: ii.amt };
                    }
                })
                if (!hasMonth[it.month]) {
                    arrs.push(obj);
                    hasMonth[it.month] = true;
                } else {
                    arrs[index][item.year] = obj.amt;
                }

            })
        })
        threeYearDatas.value = [...arrs];
    }).finally(() => loading.value = false)
}

function getDataList(row) {
    if (form.value[row.prop1]) {
        return form.value[row.prop1][row.prop2]
    }
    return []
}
</script>

<style lang="scss" >
.ticketing-info {
    .describe-com .el-descriptions__label {
        width: 200px !important;
    }
}

.total-info-list {
    display: flex;

    .total-info-item {
        width: 25%;
        padding: 10px 0;
        color: #fff;
        text-align: center;
        background-color: #409eff;
    }
}
</style>